<template>
  <div class="taking-pictures">
    <ul>
      <li class="text box">
        <van-uploader :after-read="afterRead" :max-count="1" :max-size="500 * 1024" @oversize="onOversize" />
        文字
      </li>
      <li class="picture box">
        <van-uploader :after-read="afterRead" :max-count="1" :max-size="500 * 1024" @oversize="onOversize"
          :before-read="beforeRead" />
        图片
      </li>
      <li class="video box">
        <van-uploader :after-read="afterRead" :max-count="1" :max-size="500 * 1024" @oversize="onOversize" />
        视频
      </li>
    </ul>
  </div>
</template>

<script  setup lang="ts">
import { showFailToast, showToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()

const goToExifView = () => {
  router.push({
    name: "exif"
  });
}

const afterRead = (file: any) => {
  // 此时可以自行将文件上传至服务器
  const imgformat = /image\/(png|jpg|jpeg)$/;
  if (imgformat.test(file.type)) {
    showFailToast('请上传 jpg/jpeg/png 格式图片');
    return false;
  }
  if (file.size > 5 * 1024 * 1024) {
    showFailToast('文件大小不能超过 5M');
    return false;
  }
  console.log(file);
  return true
};

const onOversize = (file: any) => {
  console.log(file);
  showToast('文件大小不能超过 500kb');
};

// 返回布尔值
const beforeRead = (file: any) => {
  if (file.type !== 'image/jpeg') {
    showToast('请上传 jpg 格式图片');
    return false;
  }
  return true;
};
</script>

<style lang="scss" scoped>
.taking-pictures {
  width: 100vw;
  height: 100vh;

  ul {
    width: 100vw;
    position: fixed;
    bottom: 100px;
    left: 0;
    display: flex;
    justify-content: space-around;

    i {
      width: 100px !important;
      height: 100px !important;
      background-repeat: no-repeat;
      display: block;
      background-size: contain;
    }


    .box {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      ::v-deep(.van-uploader__upload) {
        width: 100px !important;
        height: 100px !important;
        display: block;
        background-size: contain;
        background-color: #fff;
        background-repeat: no-repeat;
      }

      ::v-deep(.van-icon-photograph:before) {
        content: ''
      }
    }


    .text {
      ::v-deep(.van-uploader__upload) {
        background-image: url(@/assets/images/tabbar/9wY.png) !important;
      }
    }

    .picture {
      ::v-deep(.van-uploader__upload) {
        background-image: url(@/assets/images/tabbar/tKt.png) !important;
      }
    }

    .video {
      ::v-deep(.van-uploader__upload) {
        background-image: url(@/assets/images/tabbar/BeY.png) !important;
      }
    }
  }
}
</style>